<script setup>
import { nextTick, onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import {getProjectList} from "@/api/admin.js";
import {ElMessage} from "element-plus";
import request from "@/utils/request.js";

const mainRef = ref(null);
const oneRef=ref(null)

//项目数据对象
const projects=ref([])

/*const data1=ref(['跑步','跳远','11','22','33'])
const data2=ref([10,20,23,42,50])*/

const data1=ref([])
const data2=ref([])




// 指定图表的配置项和数据
const option = {
  title: {
    text: '参赛项目一览图'
  },
  tooltip: {},
  legend: {
    data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: []
    }
  ]
};
//折线图
const option2 = {
  title: {
    text: '班级排行榜'
  },
  tooltip: {},
  legend: {
    data: ['分数']
  },
  xAxis: {
    data: ['软工1班', '软工2班', '软工3班', '软工4班', '软工5班']
  },
  yAxis: {},
  series: [
    {
      name: '分数',
      data: [10, 22, 28, 23, 54],
      type: 'line',
      smooth: true
    }
  ]
};







//从后端获取数据(柱状图)
const getProject= async ()=>{
  try{
    const result=await getProjectList()
    projects.value=result.data.map(item => item.name)
    data1.value=result.data.map(item => item.name)
    option.xAxis.data=result.data.map(item => item.name)
    option.series.data=result.data.map(item => item.projectId)
    // console.log(option.xAxis.data)
  }catch (err){
    ElMessage.error("请求数据错误"+"错误为："+err.message)
    console.log(err.message)
  }

}




//从后端获取数据（折线图）

getProject().then(() => {
  nextTick().then(() => {
    if (mainRef.value) {
      const myChart = echarts.init(mainRef.value);
      myChart.setOption({
        title: {
          text: '参赛项目一览图'
        },
        tooltip: {},
        legend: {
          data: ['人数']
        },
        xAxis: {
          data: option.xAxis.data
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            type: 'bar',
            data: option.series.data
          }
        ]
      });
    }
    console.log(option.xAxis.data);
  });
});


/*const initChart = () => {
  if (mainRef.value) {
    const myChart = echarts.init(mainRef.value);
    myChart.setOption(option);
  }
};*/

const initChart2 = () => {
  if (oneRef.value) {
    const myChart = echarts.init(oneRef.value);
    myChart.setOption(option2);
  }
};

onMounted(() => {
  initChart2();
});







</script>

<template>
  <el-card>

    <div style="min-height: 700px">
    <div ref="mainRef" style="width: 1500px;height:400px;"></div>
    <div ref="oneRef" style="width: 650px;height:400px;"></div>
    </div>
  </el-card>
</template>



<style scoped lang="scss">
</style>